<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="topContainer">
        <i class="el-icon-circle-check okIcon greenColor"></i>
        <h1 class="title greenColor">建议书已创建</h1>
        <div class="redColor">
          建议书创建成功，并需要将纸质建议书送达到企业手中
        </div>

        <div class="submitBox">
          <div class="loadBtn">
            <div class="btnBox">
              <el-button
                class="commonBut saveBtn funComBut"
                @click="showFileFlag = !showFileFlag"
              >
                下载建议书<i
                  class="el-icon--right"
                  :class="[
                    showFileFlag ? 'el-icon-caret-top' : 'el-icon-caret-bottom',
                  ]"
                ></i
              ></el-button>
              <ul v-if="showFileFlag">
                <li @click="batchPdf(true)">导出为PDF</li>
                <li @click="batchPdf(false)">导出为word</li>
              </ul>
            </div>
          </div>
          <el-button class="commonBut">
            <span @click="goBack" v-if="dataList.length > 1">返回列表</span>
            <span @click="goDetail" v-else>查看详情</span>
          </el-button>
        </div>
      </div>
      <div class="bottomContainer">
        <h3>通知结果</h3>
        <table>
          <thead>
            <tr>
              <td>项目</td>
              <td>通知方式</td>
              <td>项目经理</td>
              <td>企业</td>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in dataList_SMS">
              <tr>
                <td rowspan="2">{{ item.projectName }}</td>
                <td>系统消息</td>
                <td class="redColor">
                  {{ item.projectNoticeRes || '通知中' }}
                </td>
                <td class="redColor">
                  {{ item.companyNoticeRes || '通知中' }}
                </td>
              </tr>
              <tr>
                <td>短信消息</td>
                <td class="redColor">{{ item.projectSmsRes || '通知中' }}</td>
                <td class="redColor">{{ item.companySmsRes || '通知中' }}</td>
              </tr>
            </template>
            <tr v-for="item in dataList_NOTICE" :key="item.id">
              <td>{{ item.projectName }}</td>
              <td>系统消息</td>
              <td class="redColor">{{ item.projectNoticeRes || '通知中' }}</td>
              <td class="redColor">{{ item.companyNoticeRes || '通知中' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import topTitle from '@/components/publicCom/topTitle'
import emptyTable from '@/components/publicCom/emptyTable'

export default {
  name: 'finishProposal',
  components: {
    topTitle,
    emptyTable,
  },
  data() {
    return {
      id: '',
      titleText: '返回列表',
      back: true,
      dataList: [],
      dataList_SMS: [],
      dataList_NOTICE: [],
      showFileFlag: false,
    }
  },
  activated: function () {
    this.id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    // pdf true or false
    batchPdf(pdf) {
      this.showFileFlag = false
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: '', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('body'), //loadin覆盖的dom元素节点
      })
      let dt = new Date()
      let ymd =
        dt.getFullYear() + '.' + (dt.getMonth() + 1) + '.' + dt.getDate()
      let fileName = '建议书_' + ymd + '.zip'
      let batch = true
      let data = {
        cid: this.id,
        pdf: pdf,
      }
      let url = 'api-ps/enforce/proposal/batch/pdf'
      if (this.dataList.length > 0) {
        // 1为单个；2为批量
        if (this.dataList[0].way === 1) {
          fileName =
            '建议书_' +
            this.dataList[0].projectName +
            '_' +
            ymd +
            (pdf ? '.pdf' : '.docx')
          batch = false
          data = {
            id: this.dataList[0].id,
            pdf: pdf,
          }
          url = 'api-ps/enforce/proposal/single/pdf'
        }
        this.axios({
          method: 'post',
          url: url,
          data: data,
          responseType: 'blob',
        })
          .then((res) => {
            console.log(res)
            loading.close()
            if (res && res.data.type === 'application/json') {
              let msg = '下载出错了，请稍候重试！'
              if (res.data.msg) {
                msg = res.data.msg
              }
              this.$message({
                message: msg,
                type: 'error',
              })
              return
            }
            const content = res.data
            const blob = new Blob([content])
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch((error) => {
            console.log(error)
            loading.close()
          })
      }
    },
    goBack() {
      this.$router.push('/home/onlineLaw/proposal')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/onlineLaw/proposal',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goDetail() {
      this.$router.push({
        path: '/home/onlineLaw/detailProposal',
        query: { id: this.id },
      })
    },
    getDetail() {
      this.dataList_SMS = []
      this.dataList_NOTICE = []
      this.axios({
        method: 'post',
        url: 'api-ps/enforce/config/detail',
        data: { configId: this.id },
      })
        .then((resp) => {
          console.log(resp)
          if (resp.data.hasError) {
            this.$message({
              message: '出错了',
              type: 'error',
            })
            return
          }
          this.dataList = resp.data.result.proposalDtoList
          this.dataList.forEach((it) => {
            if (it.sms === 1) {
              this.dataList_SMS.push(it)
            } else {
              this.dataList_NOTICE.push(it)
            }
          })
        })
        .catch((resp) => {
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    box-sizing: border-box;
    .greenColor {
      color: #009588;
    }
    .redColor {
      color: #e02020;
    }
    .pb16 {
      padding-bottom: 16px;
    }
    .pb36 {
      padding-bottom: 36px;
    }
  }

  .topContainer {
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    .okIcon {
      font-size: 124px;
    }
    .title {
      margin-top: 24px;
      margin-bottom: 2px;
      font-size: 28px;
      font-weight: 500;
    }
    .submitBox {
      margin-top: 30px;
      margin-bottom: 50px;
      .loadBtn {
        display: inline-block;
        .btnBox {
          position: relative;
          width: 100%;

          ul {
            width: 100%;
            position: absolute;
            top: 45px;
            max-height: 274px;
            background: #fff;
            padding: 6px 0;
            margin: 0;
            box-shadow: 0 0 8px #ddd;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 4px;
            z-index: 100;
            &::after {
              position: absolute;
              content: '';
              left: 27px;
              top: -6px;
              border-width: 0 6px 6px 6px;
              border-style: solid;
              border-color: transparent transparent #fff transparent;
            }

            li {
              width: 100%;
              color: #606266;
              height: 34px;
              line-height: 34px;
              text-align: center;
              font-size: 14px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              cursor: pointer;

              &:hover {
                color: #409eff;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }

  .bottomContainer {
    width: 95%;
    max-height: 200px;
    overflow-y: scroll;
    margin: 0 auto;
    padding: 30px 40px 40px 40px;
    background: #f5f7fb;
    box-sizing: border-box;
    h3 {
      font-size: 17px;
      font-weight: 500;
    }
    table {
      width: 100%;
      margin-top: 20px;
      border-collapse: collapse;
      border-top: 1px solid #bfc5cc;
      border-left: 1px solid #bfc5cc;
      td {
        height: 33px;
        padding: 0 24px;
        border-right: 1px solid #bfc5cc;
        border-bottom: 1px solid #bfc5cc;
        color: #333;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>
